<template>
<div class="tabbox">
    <div class="tab"  :class="{active:currentIndex==index}" v-for="(item,index) in tabs" :key="index" @click="$emit('deliverIndex',index)">{{item.tabName}}</div>
</div>
  
</template>

<script>
export default {
props:{
    tabs:{type:Array,default:[]},
    currentIndex:0,
}
}
</script>

<style lang="scss" scoped>
.tabbox{
  width: 20%;
//   text-align: center;
margin-left: 10px;
}
.tabbox .tab{
  margin: 30px 0;
  border-left: 3px solid transparent;
}
.tabbox .tab.active{
  font-weight: bold;
  border-left: 3px solid red;
}
</style>